<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pagesBox {
            list-style-type: none;
        }

        .pagesBox li {
            float: left;
            padding: 2px 5px;
            border: 1px solid #666;
            margin: 2px;
        }
        .choosed {
            background: #059;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div id="targetDiv">
    <ul class="pagesBox">
        <li value="pre">前</li>
        <li value="1">1</li>
        <li class="choosed" value="2">2</li>
        <li value="3">3</li>
        <li value="4">4</li>
        <li value="5">5</li>
        <li value="next">后</li>
    </ul>
</div>
<script>
    var pagesBox = document.querySelector("#targetDiv .pagesBox");
    pagesBox.addEventListener("click", function (event) {
        var targetBtn = event.target;
        var targetBtnValue = targetBtn.getAttribute("value");
        var baforeBtn = pagesBox.querySelector("li.choosed");
        var baforeBtnValue = baforeBtn.getAttribute("value");
        var currentValue = 1;
        var setClosedTarget=null;
        if (Number(targetBtnValue)) {
            currentValue = Number(targetBtnValue);
            setClosedTarget=targetBtn;
        }else if (Number(baforeBtnValue)&&(targetBtnValue == "pre") && (baforeBtnValue > 1)) {
            currentValue = Number(baforeBtnValue) - 1;
            setClosedTarget=baforeBtn.previousElementSibling
        } else if (Number(baforeBtnValue)&&(targetBtnValue == "next") && (baforeBtnValue <5)) {
            currentValue = Number(baforeBtnValue) + 1;
            setClosedTarget=baforeBtn.nextElementSibling;
        }
        if(setClosedTarget&&baforeBtn&&currentValue){
            ajaxCreat(setClosedTarget,baforeBtn,currentValue);//发请求
        }
    });
    function ajaxCreat(setClosedTarget,baforeBtn,currentValue){
        var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject();
        xhr.open("POST","data/data.json",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("pageNumber=currentValue");
        xhr.onreadystatechange=function () {
            //console.log(xhr.readyState,xhr.status);
            if(xhr.readyState==4&&xhr.status==200){
                //console.log(xhr.responseText);
                baforeBtn.setAttribute("class", "");
                setClosedTarget.setAttribute("class", "choosed");
            }
        };
    }

</script>
</body>
</html>